﻿@{
    Layout = "~/Views/Shared/_FormWhite.cshtml";
}
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment HostingEnvironment
@section header{
    <link href="@Url.Content("~/lib/summernote/0.8.15/summernote.min.css")" rel="stylesheet" type="text/css">
    <script src='@Url.Content("~/lib/summernote/0.8.15/summernote.js")' type="text/javascript"></script>
    <script src='@Url.Content("~/lib/summernote/0.8.15/lang/summernote-zh-CN.min.js")' type="text/javascript"></script>

    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/lib/imageupload/1.0/css/imgup.min.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/lib/imageupload/1.0/js/imgup.min.js"))

    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/lib/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.min.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/lib/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.min.js"))
}
<div class="wrapper animated fadeInRight">
    <form id="form" class="form-horizontal m">
        <div class="form-group">
            <label class="col-sm-2 control-label ">商铺<font class="red"> *</font></label>
            <div class="col-sm-10">
                <div style="width:100%;" id="shop_id" col="shop_id"></div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label ">商品<font class="red"> *</font></label>
            <div class="col-sm-10">
                <div style="width:100%;" id="goods_id" col="goods_id"></div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label ">货物名称<font class="red"> *</font></label>
            <div class="col-sm-10">
                <input id="name" col="name" type="text" class="form-control" />
            </div>
        </div>
        @*<div class="form-group">
                <label class="col-sm-2 control-label ">规格型号<font class="red"> *</font></label>
                <div class="col-sm-10">
                    <input id="model" col="model" type="text" class="form-control" />
                </div>
            </div>*@
        <div class="form-group">
            <label class="col-sm-2 control-label ">车架号<font class="red"> *</font></label>
            <div class="col-sm-5">
                <input id="VIN" col="VIN" type="text" class="form-control" />
            </div>
            <div class="col-sm-5">
                <button type="button" onclick="qrCodeCreate()" class="btn btn-w-m btn-primary btn-circle">生成二维码</button>
                <button type="button" onclick="qrCodeDownload()" class="btn btn-w-m btn-primary btn-circle">下载二维码</button>
            </div>
        </div>
        <div style="display:none;margin-bottom:160px;">
            <label class="col-sm-2 control-label ">二维码<font class="red"> *</font></label>
            <div id="qrCode" class="col-sm-10">

            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label ">货物颜色<font class="red"> *</font></label>
            <div class="col-sm-10">
                <div id="colorid" col="colorid"></div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label ">货物成本</label>
            <div class="col-sm-10">
                <input id="average_cost" col="average_cost" type="text" class="form-control" />
            </div>
        </div>
        @* <div class="form-group">
                <label class="col-sm-2 control-label ">货物库存<font class="red"> *</font></label>
                <div class="col-sm-10">
                    <input id="in_cnt" col="in_cnt" type="number" class="form-control" />
                </div>
            </div>*@
        @* <div class="form-group">
                <label class="col-sm-2 control-label ">
                    <span>货物封面</span><font class="red"> *</font><br />
                    <span>(宽高比 1.5：1)</span>
                </label>
                <div class="col-sm-10">
                    <div id="images" class="img-box">
                    </div>
                </div>
            </div>*@
    </form>
</div>

<script type="text/javascript">
    var id = ys.request("id");
    var goodsid = ys.request("goodsid");
    //var goods_model_id = ys.request("goods_model_id");
    var qrCodeImg = "";
    var brand_name = "";
    var goods_name = "";
    var category_name = "";
    var goods_model_name = "";
    var rule = 0;
    var unit = "";

    $(function () {

        $("#shop_id").ysComboBox({
            url: '@Url.Content("~/QixingManage/Store/GetListJson")',
            key: "Id",
            value: "shop_name",
            class: "form-control",
            onChange: function (val)
            {
                var shopid=$("#shop_id").ysComboBox('getValue');
                if (!ys.isNullOrEmpty(shopid)) {
                     goodsList(shopid);
                }
            }
        });

        goodsList(null);

        //  $("#goods_model_id").ysComboBox({
        //    url: '@Url.Content("~/QixingManage/Models/GetListJson")',
        //    key: "Id",
        //    value: "model_name",
        //    class: "form-control",
        //});

        @*$("#colorid").ysComboBox({
            data: top.getDataDict("color"),
            key: "DictKey",
            value: "DictValue",
            class: "form-control"
        });*@

        $("#colorid").ysComboBox({
            url: '@Url.Content("~/QixingManage/StoreGoodsAttr/GetListJson")' + '?goods_id=' + goodsid,
            key: "Id",
            value: "attr_name",
            class: "form-control",
        });


        getForm();

        //$("#images").imageUpload({ uploadImage: 'uploadThumbImage', limit:1, context: ctx });

        $('#form').validate({
            rules: {
                goods_id_select: { required: true },
                goods_id_select: { required: true },
                name: { required: true },
                model: { required: true },
                colorid__select: { required: true },
                in_cnt: { required: true,isInteger:true}
            }
        });
    });

    function goodsList(shopid) {
         var url ='@Url.Content("~/QixingManage/StoreGoods/GetListJson")' + '?id=' + goodsid;
         if (!ys.isNullOrEmpty(shopid)) {
             url ='@Url.Content("~/QixingManage/StoreGoods/GetListJson")' + '?id=' + goodsid+'&shopid='+shopid;
         }
         $("#goods_id").ysComboBox({
            url:url,
            key: "Id",
            value: "goods_name",
            class: "form-control",
            onChange: function (val)
            {
                var goods_id=$("#goods_id").ysComboBox('getValue');
                if (!ys.isNullOrEmpty(goods_id)) {
                     GetFormJson(goods_id);
                }
            }
        });
    }

    function qrCodeDownload(){
        var canvas = $("canvas")[0];
        var imageDataURI =canvas.toDataURL('image/jpg')
        var downloadLink = $("<a />", {
          href: imageDataURI,
          download: "qrcode.jpg"
        })[0];
        downloadLink.click();
    }

    function qrCodeCreate()
    {
        var vin=$("#VIN").val();
        if (ys.isNullOrEmpty(vin)) {
           return  ys.msgError("请填写车架号");
        }
        $('#qrCode').empty(); // 清空可能已存在的旧二维码
        qrCodeImg = "";//清空图片
        $('#form').mLoading({
            text:"生成中",//加载文字，默认值：加载中...
            icon:"",//加载图标，默认值：一个小型的base64的gif图片
            html:false,//设置加载内容是否是html格式，默认值是false
            content:"",//忽略icon和text的值，直接在加载框中显示此值
            mask:true//是否显示遮罩效果，默认显示
        });
        $('#form').mLoading("show");//显示loading组件
        setTimeout(function() {
            $('#form').mLoading("hide");//显示loading组件
            /*let val = brand_name + "&category_name=" + category_name + "&goods_model_name=" + goods_model_name + "&goods_name=" + goods_name + "&VIN=" + vin + "&rule=" + rule + "" + unit;*/
            let val = brand_name +"&goods_name=" + goods_name + "&VIN=" + vin;
            qrCodeLoad(val);
        }, 3000);  // 延迟 1 秒显示加载动画
    }

    function qrCodeLoad(vin) {
                var qrDiv = $('#qrCode');
                var qrCode = new QRCode(qrDiv[0], {
                    text:vin,
                    width: 128,
                    height: 128
                });
               $("#qrCode").parent().show();
    }

    function getForm() {
        if (id > 0) {
            ys.ajax({
                url: '@Url.Content("~/QixingManage/StoreGoodsProduct/GetFormJson")' + '?id=' + id,
                type: 'get',
                success: function (obj) {
                    if (obj.Tag == 1) {
                        unit=obj.Data.unitdoc;
                        brand_name=obj.Data.brand_name;
                        goods_name=obj.Data.goods_name;
                        //category_name=obj.Data.category_name;
                        //rule=obj.Data.rule;
                        //goods_model_name=obj.Data.goods_model_name;
                        vin = obj.Data.VIN;

                        $('#form').setWebControls(obj.Data);
                        $("#goods_id_select").select2({
                            "disabled": true
                        })
                         $("#shop_id_select").select2({
                            "disabled": true
                        })
                        //$("#images").imageUpload("setImageUrl", obj.Data.images);
                        if (ys.isNullOrEmpty(vin)) {
                            //let val = brand_name + "&category_name=" + category_name + "&goods_model_name=" + goods_model_name + "&goods_name=" + goods_name + "&VIN=" + vin + "&rule=" + rule + "" + unit;
                            let val = brand_name + "&goods_name=" + goods_name + "&VIN=" + vin;
                             qrCodeLoad(val);
                        }
                        //$("#colorid_select").select2({
                        //    "disabled": true
                        //})
                    }
                }
            });
        }
        else {
            var defaultData = {};
            if (goodsid != "null") {
                GetFormJson(goodsid);
                defaultData.goods_id = goodsid;
                $("#goods_id_select").select2({
                    "disabled": true
                })
                //$("#goods_model_id_select").select2({
                //    "disabled": true
                //})
                GetFormJson(goodsid, defaultData);
            }
            else {
                $('#form').setWebControls(defaultData);
            }
        }
    }

    function GetFormJson(id,defaultData) {
        var _id = id;
        ys.ajax({
                url: '@Url.Content("~/QixingManage/StoreGoods/GetFormJson")' + '?id=' + _id,
                type: 'get',
                success: function (obj) {
                    if (obj.Tag == 1) {
                        brand_name=obj.Data.brand_name;
                        goods_name=obj.Data.goods_name;
                        //category_name=obj.Data.category_name;
                        //goods_model_name=obj.Data.goods_model_name;
                        //rule=obj.Data.price;
                        //unit=obj.Data.unit;
                        if (obj.Data.unit=="1") {
                            unit='@CarUnitEnum.one.GetDescription()';
                        }
                        if (obj.Data.unit=="2") {
                            unit='@CarUnitEnum.twe.GetDescription()';
                        }
                        if (obj.Data.unit=="3") {
                            unit='@CarUnitEnum.three.GetDescription()';
                        }
                        defaultData.shop_id = obj.Data.shop_id;
                        $("#shop_id_select").select2({
                            "disabled": true
                        })
                        $('#form').setWebControls(defaultData);
                    }
                }
            });
    }

     function uploadNewsImage(file, editor, welEditable,$obj) {
        var formdata = new FormData();
        formdata.append("fileList", file);
        ys.ajaxUploadFile({
            url: '@GlobalContext.SystemConfig.ApiSite' + '/File/UploadFile?fileModule=@UploadFileType.Qixing.ParseToInt()',
            data: formdata,
            success: function (obj) {
                if (obj.Tag == 1)
                {
                    $obj.summernote('insertImage', '@GlobalContext.SystemConfig.ApiSite' + obj.Data, '/');
                }
                else {
                    ys.msgError(obj.Message);
                }
            }
        })
    }


    function saveForm(index) {
        if ($('#form').validate().form()) {
            var postData = $('#form').getWebControls({ Id: id });
            postData.color = $("#colorid").ysComboBox("getText");
            postData.shop_name = $("#shop_id").ysComboBox("getText");
            postData.goods_name=$("#goods_id").ysComboBox("getText");
            //postData.images = $("#images").imageUpload("getImageUrl");
            postData.in_cnt = 1;
            //if (ys.isNullOrEmpty(postData.images))
            //{
            //    return ys.msgError("请上传货物缩图!");
            //}
            ys.ajax({
                url: '@Url.Content("~/QixingManage/StoreGoodsProduct/SaveFormJson")',
                type: 'post',
                data: postData,
                success: function (obj) {
                    if (obj.Tag == 1) {
                        ys.msgSuccess(obj.Message);
                        parent.searchGrid();
                        parent.layer.close(index);
                    }
                    else {
                        ys.msgError(obj.Message);
                    }
                }
            });
        }
    }

    function uploadThumbImage(file, callback) {
        var formdata = new FormData();
        formdata.append("fileList", file);
        ys.ajaxUploadFile({
            url: '@GlobalContext.SystemConfig.ApiSite' + '/File/UploadFile?fileModule=@UploadFileType.Qixing.ParseToInt()',
            data: formdata,
            success: function (obj) {
                if (obj.Tag == 1) {
                    if (callback) {
                        callback('@GlobalContext.SystemConfig.ApiSite' + obj.Data);
                    }
                }
                else {
                    ys.msgError(obj.Message);
                }
            }
        })
    }
</script>

